<script>
export default{
  data(){
    return{
      num: 2,
      addValue: 1,
      fontColor: 'black'
    }
  },
  methods:{
    minV(){
      this.addValue--;
    },
    addV(){
      this.addValue++;
    },
    add(){
      this.num = this.num + this.addValue;
      this.fontColor = this.colorReturn(this.num);
    },
    colorReturn(num){
      if(num%7==0){
        return 'red';
      }
      while(num != 0){
        // 1.对其取10的余数,结果对7取余数
        var tmp = num % 10;
        if(tmp%7==0 && tmp!=0){
          return 'red';
        }
        // 2.除以10
        num = num / 10;
      }
      return 'black';
    }
  }
}
</script>
<!-- v-bind -->
<!-- v-on -->
<template>
  <h1 :class="fontColor">当前值是：{{ num }}</h1>
  <div>
    <button @click="minV()">-1</button>
    <!-- <span>每次增加：{{ addValue }}</span> -->
    <input v-model="addValue" type="number">
    <button @click="addV()">+1</button>
  </div>
  <button class="btn" @click="add()">增加</button>
</template>

<style scoped>
.btn{
  width: 200px;
  height: 80px;
  background-color: #1d94f5;
  color: #fff;
}
.default{
  color: black;
}
.red{
  color: red;
}
</style>